<template>
    <div id="apps">
        <div style="margin-left: 20px;">
            <headtitle :title="title"></headtitle>
            <!-- <selectbeforethired :title="title" :sel1="sel1"></selectbeforethired> -->
        </div>
        <div style="margin-left: 20px;">
            <h3>企业问题清单</h3>
            <div style="width: 95%;" id="select1">
                <select name="" id="sel1" selected="null" @change="sel">
                    <option value="">办理状态</option>
                    <option value="就业办理">1111</option>
                </select>
                <select name="" id="sel2" selected="null" @change="sel">
                    <option value="">问题性质</option>
                    <option value="政策咨询">政策咨询</option>
                    <option value="就业办理">就业办理</option>
                </select>
                <select name="" id="sel3" selected="null" @change="sel">
                    <option value="">问题类别</option>
                    <option value="">建设用地</option>
                    <option value="">问题类别</option>

                </select>
                <select name="" id="sel4" selected="null" @change="sel">
                    <option value="">所属市区</option>

                </select>
                <select name="" id="sel5" selected="null" @change="sel">
                    <option value="">处理单位</option>

                </select>
                <select name="" id="sel6" selected="null" @change="sel">
                    <option value="">时限</option>

                </select>

                <div class="demo-date-picker" style="display: inline-block;border: 1px solid black;border-radius: 4px;">
                    <div class="block" >
                        <el-date-picker v-model="value1" type="date" placeholder="年/月/日" :size="size" @change="sel2"
                            style="width: 130px;height: 25px;" />
                    </div>

                </div>
                <span>至</span>
                <div class="demo-date-picker" style="display: inline-block;border: 1px solid black;border-radius: 4px;">
                    <div class="block">
                        <el-date-picker v-model="value2" type="date" placeholder="年/月/日" :size="size"  @change="sel2"
                            style="width: 130px;height: 25px;" />
                    </div>

                </div>
            </div>
            <div style="margin-top: 20px;" id="select2">
                <div id="left">
                    <input type="text" style=" width: 300px; height: 28px;" id="tjsel">
                    <div style="width: 80px;height: 32px;border: 0px;background-color: #169bd5;color: white;line-height: 28px;text-align: center;display: inline-block;"
                        @click="tjsel" id="btn">
                        搜索</div>
                </div>
                <div id="right"
                    style="z-index: 999;position: absolute;right: 20%;background-color: white;height: 30px;overflow: hidden;border: #169bd5 1px solid;">
                    <span
                        style="width: 150px;background-color: #169bd5;color: white;height: 30px;display: inline-block;line-height: 30px;text-align: center;"
                        @click="open">自定义列表</span>
                    <br>
                    <input type="checkbox" checked="checked" value="1" onclick="return false;"><span
                        style="font-size: 14px;">具体问题</span>
                    <br>
                    <input type="checkbox" checked="checked" onclick="return false;" value="2"><span
                        style="font-size: 14px;">企业名称</span>
                    <br>
                    <input type="checkbox" checked="checked" onclick="return false;" value="3"><span
                        style="font-size: 14px;">问题类别</span>
                    <br>
                    <input type="checkbox" checked="checked" onclick="return false;" value="4"><span
                        style="font-size: 14px;">问题性质</span>
                    <br>
                    <input type="checkbox" checked="checked" onclick="return false;" value="5"><span
                        style="font-size: 14px;">办理状态</span>
                    <br>
                    <input type="checkbox" id="sx" value="6"><span style="font-size: 14px;">时限</span>
                    <br>
                    <input type="checkbox" id="cszt" value="7"><span style="font-size: 14px;">超时状态</span>
                    <br>
                    <input type="checkbox" id="sssq"><span style="font-size: 14px;">所属市区</span>
                    <br>
                    <input type="checkbox" checked="checked" onclick="return false;"><span style="font-size: 14px;"
                        value="9">处理单位</span>
                    <br>
                    <input type="checkbox" checked="checked" onclick="return false;"><span style="font-size: 14px;"
                        value="10">提交时间</span>
                    <br>
                    <input type="checkbox" id="jj"><span style="font-size: 14px;" value="11">解决/提报时间</span>
                    <br>
                    <input type="checkbox" id="tbr"><span style="font-size: 14px;" value="12">填报人</span>
                    <br>
                    <input type="checkbox" id="tbrzw"><span style="font-size: 14px;" value="13">填报人职务</span>
                    <br>
                    <input type="checkbox" id="tbrsj"><span style="font-size: 14px;" value="14">填报人手机</span>
                    <br>
                    <input type="checkbox" id="gddh"><span style="font-size: 14px;" value="14">固定电话</span>


                </div>
                <div style="width: 130px;height: 28px;background-color: #169bd5;display: inline-block;margin-left: 50px;color: white;text-align: center;line-height: 28px;"
                    @click="exports">
                    导出数据</div>
            </div>
        </div>
        <div id="table1">
            <div style="margin-left: 20px;">

                <el-table :data="tableData" style="width: 100% ;color: black;" height="450" border="true"
                    :cell-style="{ textAlign: 'center', padding: '6px 0' }"
                    :header-cell-style="{ 'text-align': 'center', color: 'black', height: '40px' }">
                    <el-table-column fixed prop="id" label="序号" width="60" />
                    <el-table-column prop="question" label="具体问题" width="500" />
                    <el-table-column prop="enterpriseName" label="企业名称" width="200" />
                    <el-table-column prop="property" label="问题类别" width="180" />
                    <el-table-column prop="type" label="问题性质" width="100" />
                    <el-table-column prop="status" label="办理状态" width="200" />
                    <el-table-column prop="overtime" label="超时状态" width="150" v-if="c" />
                    <el-table-column prop="area" label="所属市区" width="150" v-if="d" />
                    <el-table-column prop="unit" label="处理单位" width="200" />
                    <el-table-column prop="submitTime" label="提交时间" width="200" />
                    <el-table-column prop="data5" label="解决/提报时间" width="200" v-if="e" />
                    <el-table-column prop="informant" label="填报人" width="200" v-if="f" />
                    <el-table-column prop="phone" label="填报人手机" width="200" v-if="h" />
                    <el-table-column prop="data8" label="固定电话" width="200" v-if="i" />
                    <el-table-column prop="data9" label="时限" width="200" v-if="b" />
                    <el-table-column prop="data10" label="填报人职务" width="200" v-if="g" />
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="handleClick(scope.row)">查看</el-button>
                            <el-button link type="primary" size="small" @click="handleClick1(scope.row)">处理</el-button>
                        </template>
                    </el-table-column>



                </el-table>

            </div>
        </div>
        <!-- 分页 -->
        <div style="margin-left: 20px;" id="pageall">
            <span
                style="border: 1px solid #e4e4e4;height: 30px;width: 50px;line-height: 30px;text-align: center;margin-right: 30px;height: 30px;">首页</span>

            <div class="page">
                <el-pagination background layout="prev, pager, next" :total="100" @prev-click="prev"
                    @next-click="next" />

            </div>
            <span
                style="border: 1px solid #e4e4e4;height: 30px;width: 50px;line-height: 30px;text-align: center;margin-left: 30px;height: 30px;">尾页</span>
        </div>
    </div>
</template>

<script lang="ts">
import Axios from "@/router/ycyaxios/axiosinstance";
// import FileSaver from "file-saver";
import * as XLSX from 'xlsx'
import { toRaw } from '@vue/reactivity'
import { ref, onMounted, } from 'vue'
import { useStore } from "vuex"
// import {components} from 'vue'
// import  selectbeforethired from '../../components/Problems/selectbeforethired'
import { useRouter } from 'vue-router'
import headtitle from '../../components/Problems/headtitle.vue'
import { User } from "@element-plus/icons-vue";
export default {
    name: 'ListOfIssues',
    data() {
        return {
            title: "企业问题清单",
            sel1: "问题状态"
        }
    },
    components: {
        headtitle,
        //    selectbeforethired,
    },
    setup() {
        const router = useRouter()
        const store = useStore();
        const size = ref<'default'>('default');
        let b: any = ref("true");
        let c: any = ref("true");
        let d: any = ref("true");
        let e: any = ref("true");
        let f: any = ref("true");
        let g: any = ref("true");
        let h: any = ref("true");
        let i: any = ref("true");
        let data: any = ref();
        const totallenght: any = 10
        const tableData: any = ref('')
        

        //搜索选择框数据开始
        const tjsel = () => {
            const tjsel: any = document.getElementById("tjsel");
            const tjsel1: any = tjsel.value;
            // console.log(tjsel1)
            store.commit("tjsellist", { page: 1, tj: tjsel1 })
        }
       
        //导出数据
        const exports = () => {
            Axios({
                method: "post",
                url: "/questionList/exportlist",
                params: {



                }
            }).then((resp) => {
                console.log(resp)
            })
            const data: any = XLSX.utils.json_to_sheet(tableData.value)//此处tableData.value为表格的数据
            const wb: any = XLSX.utils.book_new()
            XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为自定义的sheet表名
            XLSX.writeFile(wb, 'test.xlsx')//test.xlsx为自定义的文件名
            console.log(111)


        }
        const handleClick = (value: any) => {
            //查看问题清单
            let id = value.id;

            Axios({
                method: "post",
                url: "/questionList/seeList",
                params: {
                    Name: "Description",
                    id: id,


                }
            }).then((resp) => {
                console.log(resp.data)
                let data1 = resp.data
                const datas = JSON.stringify(data1)
                // console.log(datas)
                router.push({ path: "/selectProblem", query: { name: datas } })
            })

        }

        const handleClick1 = (value: any) => {
            //   console.log(value)y
            let id = value.id;

            Axios({
                method: "post",
                url: "/questionList/handlingquestion",
                params: {
                    Name: "Description",
                    id: id,


                }
            }).then((resp) => {
                console.log(resp.data)
                let data1 = resp.data
                const datas = JSON.stringify(data1)
                // console.log(datas)
                router.push({ path: "/HandleProblem", query: { name: datas } })
            })
        };

        const open = () => {
            const a: any = document.getElementById("right");
            const sx: any = document.getElementById("sx");
            b.value = sx.checked;
            const cszt: any = document.getElementById("cszt");
            c.value = cszt.checked;
            const sssq: any = document.getElementById("sssq");
            d.value = sssq.checked;
            const jj: any = document.getElementById("jj");
            e.value = jj.checked;
            const tbr: any = document.getElementById("tbr");
            f.value = tbr.checked;
            const tbrzw: any = document.getElementById("tbrzw");
            g.value = tbrzw.checked;
            const tbrsj: any = document.getElementById("tbrsj");
            h.value = tbrsj.checked;
            const gddh: any = document.getElementById("gddh");
            i.value = gddh.checked;




            if (parseInt(a.style.height) == 30) {
                a.style.height = "350px";
                // console.log(1111111);

            }
            else if (parseInt(a.style.height) == 350) {
                a.style.height = "30px";

            }

        }

        const value1 = ref('')
        const value2 = ref('')
        // let datas=[];

        let page = 0;
        const pageid=ref(1)
        const prev = () => {
            page--;
            pageid.value=page+1
            console.log(page)
            store.commit("getlist", { page: pageid})
        }
        const next = () => {
            page++;
            pageid.value=page+1
            console.log(page)
            store.commit("getlist", { page: pageid})
        }
        // const tableData1=ref("[]")

//获取数据
store.commit("getlist", { page: pageid})
        data = [];
        data = store.state.ycy.alllist;
        tableData.value = data;
        // totallenght.value = tableData.value.length;
        const shortcuts = [
            {
                text: 'Today',
                value: new Date(),
            },
            {
                text: 'Yesterday',
                value: () => {
                    const date = new Date()
                    date.setTime(date.getTime() - 3600 * 1000 * 24)
                    return date
                },
            },
            {
                text: 'A week ago',
                value: () => {
                    const date = new Date()
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                    return date
                },
            },
        ]
        const disabledDate = (time: Date) => {
            return time.getTime() > Date.now()
        };
        ///选择框的数据开始
        const sel = () => {
            const sel1: any = document.getElementById("sel1");
            const sele1: any = sel1.value;
            const sel2: any = document.getElementById("sel2");
            const sele2: any = sel2.value;
            const sel3: any = document.getElementById("sel3");
            const sele3: any = sel3.value;
            const sel4: any = document.getElementById("sel4");
            const sele4: any = sel4.value;
            const sel5: any = document.getElementById("sel5");
            const sele5: any = sel5.value;
            const sel6: any = document.getElementById("sel6");
            const sele6: any = sel6.value;

            store.commit("sellist", { page: 1, sel1: sele1, sel2: sele2, sel3: sele3, sel4: sele4, sel5: sele5, sel6: sele6, })
        }
        const sel2 = () => {
            console.log(1111111111)
            const sel1: any = document.getElementById("sel1");
            const sele1: any = sel1.value;
            const sel2: any = document.getElementById("sel2");
            const sele2: any = sel2.value;
            const sel3: any = document.getElementById("sel3");
            const sele3: any = sel3.value;
            const sel4: any = document.getElementById("sel4");
            const sele4: any = sel4.value;
            const sel5: any = document.getElementById("sel5");
            const sele5: any = sel5.value;
            const sel6: any = document.getElementById("sel6");
            const sele6: any = sel6.value;
            const data: any = value1.value;
            console.log(data)
            const year: any = data.getFullYear()
            console.log(year)
             const month: any = data.getMonth()
             console.log(month)
              const day: any = data.getDate()
              console.log(day)
              const starttime: any = (year + "-" + month + "-" + day)
              console.log(starttime)
            // const years: any = year.toString()
            // const day: any = data.getDate()
            // const days: any = day.toString()
           
            // const months: any = month.toString()
            // const daytime: any = (years + "-" + months + "-" + days)
            // //开始时间戳
            // // let start = new Date(daytime).getTime();
            // const data2: any = value2.value;
            // const year2: any = data2.getFullYear()
            // const years2: any = year2.toString()
            // const day2: any = data2.getDate()
            // const days2: any = day2.toString()
            // const month2: any = data2.getMonth()
            // const months2: any = month2.toString()
            // const daytime2: any = (years2 + "-" + months2 + "-" + days2)
            // //结束时间戳
            // // let end = new Date(daytime2).getTime();

            //  console.log(start,end )

            store.commit("sellist", { page: 1, sel1: sele1, sel2: sele2, sel3: sele3, sel4: sele4, sel5: sele5, sel6: sele6, })
        }
        ///选择框数据结束


        return {
            disabledDate,
            size,
            shortcuts,
            value2,
            value1,
            tableData,
            totallenght,
            prev,
            next,
            handleClick,
            handleClick1,
            open,
            b, c, d, e, f, g, h, i,
            onMounted,
            sel,
            tjsel,
            sel2,
            exports,


        }
    }
}
</script>

<style scoped>
#btn:hover {
    cursor: pointer;
}

#right {
    transition: all .2s linear;

}

#right input {
    margin-left: 10%;
}

#apps {
    background-color: white;
    width: 80%;
    /* height: 200px; */
    /* border: 1px solid red; */
    border-radius: 5px;
}

#pageall {
    width: 95%;
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

select {
    width: 120px;
    height: 28px;

}

#select1 {
    display: flex;
    justify-content: space-between;
}

#select2 {
    width: 95%;
    display: flex;
    justify-content: space-between;
}

#table1 {
    width: 95%;
    margin-top: 40px;
}
</style>